<template>
    <h2>窗口退费</h2>
        <h1>精准搜索</h1>
        <el-row>
        <el-col :span="4">
            <el-input v-model="query.caseNumber" placeholder="请输入病历号"></el-input>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="4">
            <el-input v-model="query.realName" placeholder="请输入姓名"></el-input>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="2">
            <el-button @click="getByPage">搜索</el-button>
        </el-col>
        <el-col :span="2">
            <el-button @click="resetF">重置</el-button>
        </el-col>
    </el-row>

    <h1>按条件筛选</h1>
    <el-row>
        <el-col :span="4">
          <!-- 1-已挂号 2-医生接诊 3-看诊结束 4-已退号 -->
             <el-select placeholder="处方状态" v-model="query.state" clearable>
                  <el-option label="处方状态" :value="null"></el-option>
                  <el-option label="已支付" :value="1"></el-option>
                  <el-option label="未支付" :value="0"></el-option>
             </el-select>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="3">
              <el-date-picker
                  v-model="query.createtime"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="开立时间"
              />
        </el-col>
        <el-col :span="4"></el-col>
        <el-col :span="4">
          <el-select
              clearable
              v-model="query.id"
              placeholder="项目"
          >
              <el-option v-for=" item in itemList" 
                              :key="item.id" 
                              :label="item.costname" 
                              :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="2">
            <el-button @click="getByPage">查询</el-button>
        </el-col>
        <el-col :span="2">
            <el-button @click="resetS">重置</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <el-table :data="pb.records" 
		          stripe 
				  border
				  >
                    <el-table-column type="index" width="70" label="编号" />
                    <el-table-column prop="register.caseNumber" label="病历号" width="100" />
                    <el-table-column prop="register.realName" label="姓名"/>
                    <el-table-column prop="costname" label="项目名称" width="180" />
                    <el-table-column prop="costprice" label="单价" width="60"/>
                    <el-table-column prop="number" label="数量" width="60"/>
                    <el-table-column prop="createtime" label="开立时间" width="160"/>
                    <el-table-column label="状态" width="70">
                        <template #default="{row}">
                            <span v-if="row.state==0">未支付</span>
                            <span v-else-if="row.state==1">已支付</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="140px">
		        <template #default="scope">
		          <el-button 
					size="small" 
					:disabled="scope.row.state!=1"
                    @click="refund(scope.row.id)"
					>
		            退费
		          </el-button>
		          <el-button
		            size="small"
		            type="danger"
                    :disabled="scope.row.state!=0"
		            @click="handleDelete(scope.row.id)"
		          >
		            删除
		          </el-button>
		        </template>
		      </el-table-column>
		</el-table>
        </el-col>
    </el-row>
    <!-- 分页组件 -->
	<el-row>
	  <el-col :span="6"></el-col>
	  <el-col :span="12">
		   <el-pagination
		        v-model:current-page="query.current"
		        v-model:page-size="query.size"
		        :page-sizes="[5, 8, 10, 20]"
		        layout="total, sizes, prev, pager, next, jumper"
		        :total="pb.total"
		        @size-change="getByPage"
		        @current-change="getByPage"
		      />
	  </el-col>
	</el-row> 
</template>

<script setup>
import { ElMessage,ElMessageBox } from 'element-plus';
import httpRequest from '../../common/index.js';
import { onMounted, ref, getCurrentInstance } from 'vue';

const {proxy} = getCurrentInstance();

const query = ref({
    current: 1,
    size: 5,
    caseNumber: '',
    realName:'',
    state:null,
    createtime:'',
    id:''
})

const pb = ref({
    total: 0,
    pages: 0,
    records: []
});

const itemList = ref([]);

//查询需要进行的检查  状态是已缴费的
const getByPage = ()=>{
    httpRequest(
        proxy,
        'post',
        '/cost/page',
        query.value,
        resultBean=>{
            pb.value = resultBean.data;
        }
    )
}

const getItem=()=>{
    httpRequest(
        proxy,
        'post',
        '/cost/page',
        query.value,
        resultBean=>{
            itemList.value = resultBean.data.records;
        }
    )

}

//重置搜索条件
const resetF=()=>{
    query.value ={
        current: 1,
        size: 5,
        caseNumber: '',
        realName:''
    }
}

//重置查询条件
const resetS=()=>{
    query.value ={
        current: 1,
        size: 5,
        state:null,
        createtime:'',
        costname:''
    }
}

 //选中项的id集合
let selectOptions = ref([]);
  
//表格中多选框选中或取消时会触发  也就是选中项变化
const handleSelectionChange = (newSelection)=>{
    console.log('选中项改变',newSelection);
    selectOptions.value = []; //清空
    newSelection.forEach((selOp)=>{
        console.log(selOp);
        selectOptions.value.push(selOp);
    });
}

const updateForm=ref({
    id:null,
    state:0,
    settleCategoryId:null
})

const refund=(id)=>{
    updateForm.value.id = id;
    httpRequest(
        proxy,
        'post',
        '/cost/refund',
        updateForm.value,
        resultBean=>{
            ElMessage.success('退费成功');
            getByPage();
        }
    )
}
const handleDelete=(id)=>{
console.log('删除：id----',id);
        ElMessageBox.confirm(
            '您确定要删除该费用记录吗？',
            '删除提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
            .then(() => {
                //确定删除
                proxy.$axios({
                    method: 'delete',
                    url: '/cost/del/'+id
                }).then(res=>{
                    let resultBean = res.data;
                    if(resultBean.code == 200){
                        ElMessage.success('删除成功');
                        getByPage();
                    }else{
                        ElMessage.error(resultBean.msg);
                    }
                })
                
            })
            .catch(() => {
                 ElMessage.info('取消删除');
            })
        }

onMounted(()=>{
    getByPage();
    getItem();
})

</script>

<style>
</style>